前端之Angular2实战：基于Webpack与ES6的Angular2工程搭建

​笔者在之前的开发流中习惯了Webpack+ES6+React的Workflow，Angular2本身也是秉持的模块的思想，因此笔者在学习Angular2的时候首先想到的也就是将原本流程里的React变为Angular2。Angular2官网上的Quick Start是用的TypeScript，准确的说，是AtScript的规范。Angular2本身引入了大量的第三方库，就像官方示例上面的，有JSPM的System、Reflect等等，这也给搭建环境时造成了一定的困扰。本节的代码笔者已经上传到了Github。Webpack的安装与基本使用就不在这边赘述，没学过的小伙伴可以看笔者其他的博文。

Setup

Directory(文件目录)

|package.son 存放nom相关的配置

|webpack.config.js 存放webpack相关的配置

|assets 存放代码以及资源文件

├── common 存放通用的资源文件

│   ├── font 字体文件

│   ├── css 通用样式文件

│   └── img 图片文件

├── components 组件

│   ├── hello

│   │   └── hello.js

│   └── helloTemplate

│       ├── helloTemplate.html

│       └── helloTemplate.js

├── main.js 入口文件

├── models 模型以及数据类

├── services 服务

├── utils 工具类

└── widgets 界面插件类

package.json

搭建环境需要大量的Npm依赖项，都列举在了下面：

{
  "name": "angular2-es6-webpack-quickstart",
  "version": "0.0.1",
  "description": "repository for starter with angular2,es6 and webpack",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "angular2",
    "es6",
    "webpack"
  ],
  "author": "chevalier",
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-alpha.37",
    "reflect-metadata": "^0.1.1",
    "rx": "^2.5.3",
    "zone.js": "^0.5.4"
  },
  "devDependencies": {
    "a1atscript": "^0.4.4",
    "autoprefixer-loader": "^2.0.0",
    "babel": "^5.8.23",
    "babel-core": "^5.8.23",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.4",
    "image-webpack-loader": "^1.6.1",
    "imagemin": "^3.2.0",
    "node-sass": "^3.3.2",
    "react-mixin": "^1.7.0",
    "sass-loader": "^2.0.1",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.0",
    "typescript": "^1.6.0-beta",
    "typescript-simple-loader": "^0.3.7",
    "es6-shim": "^0.33.1",
    "ng-annotate": "^1.0.2",
    "raw-loader": "^0.5.1",
    "ng-annotate-webpack-plugin": "^0.1.2"
  }
}

webpack.config.js

存放Webpack配置：

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'assets/main.js'),
    // Config for our build files
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.jsx$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.(es6|js)$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
            {test: /\.(png|jpg|ttf|woff|svg|eot)$/, loader: 'url-loader?limit=8192'},// inline base64 URLs for <=8k images, direct URLs for the rest
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions'
            },
            // support for .html as raw text
            {test: /\.html$/, loader: 'raw'},
            {
                test: /\.(scss|sass)$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions!sass?sourceMap'
            },
            {
                test: /\.ts$/,
                exclude: /(libs|node_modules)/,
                loader: 'typescript-simple',
                query: {
                    'ignoreWarnings': [
                        2300, // 2300 -> Duplicate identifier
                        2309, // 2309 -> An export assignment cannot be used in a module with other exported elements.
                        2346, // 2346 -> Supplied parameters do not match any signature of call target.
                        2432  // 2432 -> In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element.
                    ]
                }
            }
        ],
    },
    externals: {
        jquery: "jQuery",
        pageResponse: 'pageResponse'
    },
    resolve: {
        alias: {
            libs: path.resolve(__dirname, 'libs'),
            nm: path.resolve(__dirname, "node_modules")
        }
    }
};

HelloWorld

环境搭建完毕，自然要开始写我们的HelloWorld。这里组件的模块化以及引入都是用的ES6的语法，然后通过Webpack统一编译。利用Webpack同样可以支持AtScript的语法：

hello.js

/**
 * Created by apple on 15/9/14.
 */
import 'nm/reflect-metadata/Reflect.js';
import 'nm/zone.js/lib/zone.js';
import 'nm/es6-shim';
import { Component, View, bootstrap } from 'nm/angular2/angular2';

@Component({
    selector: 'my-app'
})

@View({
    template: '<h1>Hello {{ name }}</h1>'
})

class MyAppComponent {
    constructor() {
        this.name = 'World';
    }
}

bootstrap(MyAppComponent);

main.js

import {MyAppComponent} from "./components/hello/hello.js";

import {HelloTemplateComponent} from "./components/helloTemplate/helloTemplate.js";

import {Component, View, bootstrap} from 'nm/angular2/angular2';

bootstrap(MyAppComponent);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<my-app></my-app>
</body>
<script src="dist/bundle.js"></script>
</html>

Run

npm install http-server -g
http-server

然后打开localhost:8080即可以看到Angular2为我们渲染的新界面。